<template>
    <div class="orders">
        <Search @searchData="getOrdersData" @resetData="getOrdersData" :placeholder="placeholder"></Search>
        <el-card>
            <el-table height="500" :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="序号" sortable align="center">
                </el-table-column>
                <el-table-column prop="username" label="下单用户" align="center">
                </el-table-column>
                <el-table-column prop="orderDetails" label="订单详情" align="center">
                    <template slot-scope="scope">
                        <el-button @click="orderDetails(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="orderCode" label="订单编号" width="200" align="center">
                </el-table-column>
                <el-table-column prop="name" label="收货人" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="收货人电话" width="150" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收货地址" align="center" width="300" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.orderStatus == 0">待发货</span>
                        <span v-if="scope.row.orderStatus == 1">已发货</span>
                        <span v-if="scope.row.orderStatus == 2">已收货</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" v-if="scope.row.orderStatus == 0" type="primary"
                            size="mini" plain>发货</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :paginationData="paginationData" @getPaginationData="getOrdersData"></Pagination>
        </el-card>
        <OrderDetailDialog :orderObj="orderRow"></OrderDetailDialog>
    </div>
</template>
<script>
import Search from '../../components/search/index.vue'
import Pagination from '../../components/pagination/index.vue'
import OrderDetailDialog from './order_detail/index.vue'
export default {
    name: 'orders',
    components: {
        Search,
        Pagination,
        OrderDetailDialog
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            tableData: [],
            srcList: [],
            paginationData: {},
            orderRow: {},
            placeholder: '请输入订单编号'

        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {
        this.getOrdersData()
    },
    methods: {
        // 获取订单信息
        getOrdersData(obj = { currentPage: 1, pageSize: 10, orderCode: '' }) {
            obj = { currentPage: obj.currentPage, pageSize: obj.pageSize, orderCode: obj.keyword }
            this.request.post('/order/selectAllOrderPage', obj).then(res => {
                if (res.code == 20000) {
                    // res.data.list.forEach(item => {
                    //     if (item.createdDt) {
                    //         item.createdDt = item.createdDt.slice(0, 10)
                    //     }
                    // })
                    this.tableData = res.data.list
                    this.paginationData = res.data
                    this.srcList = res.data.list.map(item => item.productImg)
                }
            })
        },
        // 修改订单信息
        putOrderInfo(obj) {
            this.request.put(`/order/orderEdit?id=${obj.id}&orderStatus=${obj.orderStatus}`).then(res => {
                if (res.code == 20000) {
                    // 重新获取订单列表
                    this.getOrdersData()

                }
            })
        },
        // 编辑订单信息
        handleEdit(row) {
            this.$bus.$emit('add', true)
            this.$bus.$emit('getForm', row)
        },
        // 查看订单详情
        orderDetails(row) {
            this.$bus.$emit('DetailDialogShow', true)
            this.orderRow = row
        },
        // 订单状态
        handleClick(row) {
            const obj = {
                id: row.id,
                orderStatus: 1
            }

            this.$confirm('是否确认发货?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.putOrderInfo(obj)
                this.$message({
                    type: 'success',
                    message: '发货成功'
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
};
</script>
<style lang='' scoped>
</style>